<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        class Fighter {

            static type = "战士"
            static showType(){
                // 静态方法中的this为当前类
                console.log("this in Fighter",this);
                console.log(this.type);
            }

            // 构造方法
            constructor(name) {
                this.name = name
            }

            // 实例方法
            fight() {
                console.log(`${this.name}又在干架了`);
            }
        }
    </script>

    <script>
        class Magic extends Fighter {
        }

        class Archer extends Fighter {
            constructor(name, weapon) {
                // 调用父类构造方法
                super(name)
                this.weapon = weapon
            }

            fight() {
                // 调用父类的实例方法
                super.fight()

                // 自己再扩展扩展
                console.log(`${this.name}默默拿出了${this.weapon}`);
            }
        }

        class General extends Fighter {
            constructor(name, fighters = []) {
                // Fighter.call(this, name)
                super(name)
                this.fighters = fighters
            }

            fight() {
                //  // 调用父类的干架方法
                //  Fighter.prototype.fight.call(this)
                super.fight()

                // 实例方法中的this就是实例自己
                console.log("实例方法中的this",this);

                // 自己再扩展扩展
                // console.log(`${this.name}让${this.fighters}上`);
                this.fighters.forEach(
                    (f, index) => f.fight()
                )
            }
        }

    </script>

    <script>
        const ys = new Magic("亚索")
        const hy = new Archer("后裔", "碉堡神弓")
        const bq = new General("白起", [ys,hy])
        // hy.fight()
        // ys.fight()
        bq.fight()

        console.log(Fighter.type);
        Fighter.showType()
    </script>
</body>

</html>